<script>
import ClassesApi from "../api/classes";
import CourseApi from "../api/course";
import StudentApi from "../api/student";
import ScoreApi from "../api/score";

export default {
  data() {
    return {
      classesList: [], //班级
      courseList: [], //课程
      selectClassesId: "",
      selectCourseId: "",
      displayInfo: {
        course: {},
        classes: {}
      },
      dataList: [],
      scoreList: [], //成绩
      actionDisabled: false
    };
  },
  methods: {
    async getClassesList() {
      let api = new ClassesApi();
      this.classesList = await api.getList();
      console.log(this.classesList);
    },
    async getCourseList() {
      let api = new CourseApi();
      this.courseList = await api.getList();
      console.log(this.courseList);
    },
    async getData() {
      await this.getClassesList();
      await this.getCourseList();
    },
    getCourseInfo() {
      this.displayInfo.course = this.courseList.filter(
        (item) => item.id === this.selectCourseId
      )[0];
    },
    async getStudentListByClassId() {
      this.displayInfo.classes = this.classesList.filter(
        (item) => item.id === this.selectClassesId
      )[0];

      this.dataList = [];
      this.scoreList = [];
      this.actionDisabled = false;
      let apiStudent = new StudentApi();
      this.dataList = await apiStudent.getListByClassesId(this.selectClassesId);
      let apiScore = new ScoreApi();
      for (let index = 0; index < this.dataList.length; index++) {
        const element = this.dataList[index];
        let _score = await apiScore.getListByStudentIdAndCourseId(
          this.dataList[index].id,
          this.selectCourseId
        );
        if (_score[0] && _score[0].finished === 1) this.actionDisabled = true;
        this.dataList[index] = { ..._score[0], ...element };
      }
      console.log(this.dataList);
    },
    generalScore(row) {
      row.courseId = this.selectCourseId; //保存课程ID
      row.score4 = Math.round(row.score1 * 0.2 + row.score2 * 0.2 + row.score3 * 0.6);//计算总评成绩
      return row.score4;
    },
    async onSave() {
      let api = new ScoreApi();
      for (let index = 0; index < this.dataList.length; index++) {
        const element = this.dataList[index];
        const _obj = {};
        ({
          id: _obj.studentId,
          courseId: _obj.courseId,
          classesId: _obj.classesId,
          score1: _obj.score1,
          score2: _obj.score2,
          score3: _obj.score3,
          score4: _obj.score4
        } = element);
        //保存状态
        _obj.finished = 0;
        let _arr = await api.getListByStudentIdAndCourseId(_obj.studentId, _obj.courseId);
        if (_arr[0]) {
          _obj.id = _arr[0].id;
          await api.edit(_obj);
        } else {
          await api.add(_obj);
        }
        this.scoreList[index] = _obj;
      }
      console.log(this.scoreList);
      this.$router.replace("/manager/score-query");
    },
    async onSubmit() {
      let api = new ScoreApi();
      for (let index = 0; index < this.dataList.length; index++) {
        const element = this.dataList[index];
        const _obj = {};
        ({
          id: _obj.studentId,
          courseId: _obj.courseId,
          classesId: _obj.classesId,
          score1: _obj.score1,
          score2: _obj.score2,
          score3: _obj.score3,
          score4: _obj.score4
        } = element);
        //保存状态
        _obj.finished = 1;
        let _arr = await api.getListByStudentIdAndCourseId(_obj.studentId, _obj.courseId);
        if (_arr[0]) {
          _obj.id = _arr[0].id;
          await api.edit(_obj);
        } else {
          await api.add(_obj);
        }
        this.scoreList[index] = _obj;
      }
      console.log(this.scoreList);
      this.$router.replace("/manager/score-query");
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/manager/score' }">成绩管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider />

    <!-- 功能区 -->
    <el-row class="row-bg" justify="space-between">
      <el-col :span="4">
        <h3>成绩录入</h3>
      </el-col>

      <el-col :span="12">
        <el-space wrap>
          <el-select
            v-model="selectCourseId"
            placeholder="选择课程"
            filterable
            @change="getCourseInfo">
            <el-option
              v-for="item in courseList"
              :key="item.id"
              :label="item.name + ' / ' + item.teacher"
              :value="item.id" />
          </el-select>

          <el-select
            v-model="selectClassesId"
            placeholder="选择需录入成绩的班级"
            filterable
            @change="getStudentListByClassId">
            <el-option
              v-for="item in classesList"
              :key="item.id"
              :label="item.name + ' / ' + item.department"
              :value="item.id" />
          </el-select>
        </el-space>
      </el-col>
    </el-row>

    <!-- 信息展示 -->

    <el-descriptions border>
      <el-descriptions-item label="课程名">{{ displayInfo.course.name }}</el-descriptions-item>
      <el-descriptions-item label="学分">{{ displayInfo.course.credit }}</el-descriptions-item>
      <el-descriptions-item label="学时">{{ displayInfo.course.hours }}</el-descriptions-item>
      <el-descriptions-item label="授课教师">{{ displayInfo.course.teacher }}</el-descriptions-item>
      <el-descriptions-item label="班级">
        {{ displayInfo.classes.name }} / {{ displayInfo.classes.department }}
      </el-descriptions-item>
    </el-descriptions>

    <el-table :data="dataList" style="width: 100%" empty-text="暂无数据" border>
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column prop="number" label="学号" align="center" />
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column prop="score1" label="平时成绩" align="center">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.score1"
            :min="0"
            :max="100"
            :controls="false"
            :disabled="actionDisabled" />
        </template>
      </el-table-column>
      <el-table-column prop="score2" label="期中成绩" align="center">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.score2"
            :min="0"
            :max="100"
            :controls="false"
            :disabled="actionDisabled" />
        </template>
      </el-table-column>
      <el-table-column prop="score3" label="期末成绩" align="center">
        <template #default="scope">
          <el-input-number
            v-model="scope.row.score3"
            :min="0"
            :max="100"
            :controls="false"
            :disabled="actionDisabled" />
        </template>
      </el-table-column>
      <el-table-column prop="score4" label="总评成绩" align="center">
        <template #default="scope">
          <span>{{ generalScore(scope.row) }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row :gutter="20">
      <el-col :span="4" :offset="20">
        <el-button type="success" @click="onSave" :disabled="actionDisabled">保存</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="actionDisabled">提交</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.el-row {
  margin-bottom: 16px;
}

.el-table {
  margin-bottom: 16px;
}
</style>
